<template>
    <div>
      <!--新增弹窗-->
      <el-dialog title="新增" :visible.sync="dialogVisible" :modal-append-to-body="false"
                 :close-on-click-modal="false" :before-close="handleClose1" :append-to-body="true" width="80%">
        <el-form label-position="right" label-width="80px" ref="submitForm" :model="submitForm"  v-loading="formLoading"
                 element-loading-spinner="null">
          <el-row style="display: flex;flex-wrap: wrap">
            <el-col style="width: 46%">
              <el-form-item label="标签" prop="tag">
                <el-select id="id-offer-componets-origincreativeadd-tag"
                           v-model="submitForm.tag" size="mini" multiple filterable allow-create default-first-option
                           class="form_item">
                  <el-option v-for="(item,index) in tagsList" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-form-item label="备注" prop="remark">
                <el-input id="id-offer-componets-origincreativeadd-remark" v-model="submitForm.remark" style="width: 50%" type="textarea" size="mini"
                          :autosize="{minRows:2}">
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="素材">
              <creative-upload-prod-obs :file-map="fileList" :limit="100" :plug-in-unit="tagsLength"
                          ref="beeltesUpload"></creative-upload-prod-obs>
            </el-form-item>
          </el-row>
          <div style="display: flex;margin-top: 50px">
            <div v-for="(item,index) in fileList" :key="index" class="product-upload">
              <ul class="el-upload-list el-upload-list--picture-card">
                <li class="el-upload-list__item is-ready" style="height: 155px;width: 155px">
                        <span v-if="item.type === 'image' || item.type === 'video'">
                          <el-progress v-if="item.progress !== 100" type="circle"
                                       :percentage="item.progress"></el-progress>
                          <span v-if="item.url === '-1'">上传失败</span>
                          <img v-if="item.type === 'image' && item.progress === 100 && item.url !=='-1' "
                               class="el-upload-list__item-thumbnail creative" :src="item.url" alt="">
                          <video v-if="item.type  === 'video' && item.progress === 100 && item.url !=='-1' "
                                 class="el-upload-list__item-thumbnail creative" :src="item.url"></video>
                         <span class="el-upload-list__item-actions">

                          </span>
                        </span>
                </li>
              </ul>
            </div>
          </div>

          <el-form-item>
            <el-button id="id-offer-componets-origincreativeadd-handleAddSubmit" size="small" icon="el-icon-circle-plus-outline" type="primary"
                       style="margin-left: 60%;margin-top: 30px;"
                       @click="handleAddSubmit">提 交
            </el-button>
            <el-button id="id-offer-componets-origincreativeadd-handleClose"
                       size="small" icon="el-icon-circle-close" @click.prevent="handleClose([])">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

    </div>
</template>

<script>

import {add, getTagList} from "@/api/offer/origincreative";
import uploadObs from "@/components/beetles-upload/upload_obs";
import creativeUploadProdObs from "@/components/beetles-upload/creative_upload_prod_obs";

export default {
  name: "originCreativeAdd",
  components: {
    uploadObs,
    creativeUploadProdObs
  },
  props:{
    dialogVisible:{
      type:String
    },
  },
  data() {
    return {
      fileList: [],
      formLoading: false,
      submitForm: {
        tag: [],
        remark: '',
      },
      fileMap: [],//obs上传素材列表
      tagsList: [],
      tagsLength: 0,
    }
  },
  created() {
    //获取tag列表
    getTagList().then(res=>{
      this.tagsList = res.data.data
      this.tagsLength = this.tagsList.length
    })
  },
  methods: {
    //校验华为云素材
    verificationFiles() {
      let files = this.fileList
      if (files.length === 0) {
        this.$message({
          type: 'error',
          message: '请提供上传素材!'
        })
        return null
      }

      let complete = true // 完成度
      files.map(item => {
        if (item.progress !== 100) {
          complete = false
        }
      })

      if (!complete) {
        this.$message({
          type: 'error',
          message: '请等待素材上传完成!'
        })
        return null
      }
      let val = []
      files.map(item => {
        val.push({
          name: item.name,
          url: item.url,
        });
      });
      return val
    },
    async handleAddSubmit() {

      let files = this.verificationFiles();
      if (files === null)
        return;
      if(!this.$refs.beeltesUpload.uploadCompleted()) {
        this.$message.warning('文件未上传完成');
        return;
      }
      let form = {
        remark: this.submitForm.remark,
        tag: this.submitForm.tag.join(','),
        fileMapList: files,
      };

      let data = []

      this.formLoading = true;
      await add(form).then(res=>{
        if(res.data.success) {
          data = res.data.data;
          this.$message.success('提交成功');
          this.handleClose(data)
        }
      }).finally(()=>{
        this.formLoading = false
      });
    },
    handleClose(originCreativeList) {
      let self = this;
      self.$nextTick(()=>{
        self.$refs.submitForm.resetFields()
        self.$refs.beeltesUpload.$refs.upload.uploadFiles = []
        self.dialogVisible = false
        self.$emit('onClose', originCreativeList);
      })
    },
    handleClose1() {
      this.handleClose(null);
    },
  }
}
</script>

<style scoped>

</style>
